<template>
  <v-container
    class="green lighten-2"
    style="position:fixed;top:0px;bottom:0px;left:0px;rigth:0px;overflow:scroll;"
  >
    <!-- 第负行，标题、返回按钮、问号图标 -->
    <v-row class="mt-n3">
      <v-col>
        <v-btn
          :to="{name:'greenpoints'}"
          class="mx-2"
          elevation="0"
          fab
          outlined
          x-small
          color="white"
        >
          <v-icon color="white">mdi-keyboard-backspace</v-icon>
        </v-btn>
      </v-col>
      <v-col>
        <h3 class="d-flex justify-center">积 分 兑 换</h3>
      </v-col>
      <v-col>
        <v-dialog v-model="dialog" scrollable persistent width="330">
          <template v-slot:activator="{ on }">
            <v-row justify="end">
              <v-icon class="mr-4" v-on="on">mdi-help-circle</v-icon>
            </v-row>
          </template>
          <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>碳积分规则</v-card-title>
            <v-card-text style="height: 400px;">
              <b>一、碳积分支付</b>
              <br />①目前仅支持付款时出示支付码被扫码完成支付。
              <br />②付款时只能使用碳积分抵扣现金，不可使用我的南京app内的绿色积分抵扣。
              <br />③一个碳积分抵扣一元。
              <br />④使用碳积分抵扣现金的总额会根据活动规则进行变动，仅用户关注每次活动规则。
              <br />⑤支付时用户可选择是否使用碳积分，系统默认为使用碳积分抵扣现金，如选择不使用碳积分，则直接使用零钱账户或绑定银行卡内现金进行支付。
              <br />⑥当次支付金额中非碳积分抵扣的部分用户需使用零钱账户或绑定银行卡内的现金完成支付。
              <br />
              <br />
              <b>二、碳积分兑换</b>
              <br />①碳积分可在我的南京app内通过兑换获得点击积分兑换进入兑换页面。
              <br />②在兑换碳积分之前，请先按照提示进行绑卡，开通电子账户才能使用碳积分。
              <br />③用户可兑换的碳积分数量以当期活动规则为准。
              <br />④绿色积分兑换碳积分比例为十个绿色积分兑换一个碳积分。
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="primary" text @click="dialog = false">确定</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-col>
    </v-row>
    <!-- 第零行，积分 -->
    <!-- 第一行，图标 -->
    <v-row justify="center">
      <v-avatar size="36" color="white mt-6">
        <v-icon dark color="green lighten-2">mdi-leaf</v-icon>
      </v-avatar>
    </v-row>
    <!-- 第二行 -->
    <v-row justify="center">
      <div class="white--text font-weight-bold">碳积分余额</div>
    </v-row>
    <!-- 第三行 -->
    <v-row justify="center">
      <div class="white--text font-weight-bold">{{cscore}}</div>
    </v-row>
    <!-- 第一行，兑换 -->
    <div class="white--text title font-weight-black mt-8">兑换积分</div>
    <v-row>
      <v-col>
        <v-card>
          <v-row>
            <div class="font-weight-bold ml-6 mt-4">可兑换的绿色积分：{{gscore}}</div>
          </v-row>
          <v-row justify="center">
            <v-col cols="10">
              <v-text-field width="100" label="输入兑换的值" v-model="text"></v-text-field>
            </v-col>
          </v-row>
          <v-row justify="end">
            <div class="blue--text body-2 mr-10 mt-n7">全部兑换</div>
          </v-row>
          <v-row justify="center">
            <v-btn
              width="250"
              color="orange"
              dark
              class="mt-4 font-weight-bold"
              @click="exchange()"
            >兑 换</v-btn>
          </v-row>
          <v-row justify="center">
            <div class="white--text mt-2">看不见我</div>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
    <!-- 第二行，碳积分明细 -->
    <div class="white--text title font-weight-black mt-8">碳积分明细</div>
    <v-row>
      <v-col>
        <v-card>
          <!-- 示例行 -->
          <v-row v-show="showb">
            <v-col cols="1"></v-col>
            <v-col cols="8">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>绿色积分兑换</v-list-item-title>
                  <v-list-item-subtitle>20-3-11 21:51</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-start align-center">
              <div>+34.5</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 示例行 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="8">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>线下支付使用</v-list-item-title>
                  <v-list-item-subtitle>20-3-11 21:51</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-start align-center">
              <div>-100</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>

          <!-- <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="8">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>线下支付使用</v-list-item-title>
                  <v-list-item-subtitle>20-3-12 20:31</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-start align-center">
              <div>-100</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>-->
        </v-card>
      </v-col>
    </v-row>
    <!-- 第三行，规则说明 -->
    <!-- <div class="white--text title font-weight-black mt-8">规则说明</div>
    <v-row>
      <v-col>
        <v-card>占位</v-card>
      </v-col>
    </v-row>-->
  </v-container>
</template>

<script>
export default {
  data: () => ({
    dialog: false,
    showb: false,
    cscore: 50,
    gscore: 345,
    text: ""
  }),
  methods: {
    exchange() {
      this.cscore += this.gscore / 100;
      this.gscore = 0;
      this.showb = true;
      this.text = "";
    }
  }
};
</script>

<style>
</style>